<div class="type">
	<div class="typeContent">
		<span class="top">高级选项：</span>
		<div class="city">
			<span class="cityS"></span>
			<i class="position"></i>
			<i class="arrow"><img src="/ceca_two/img/xxjdown_arrow.png" /></i>
			<div class="typeMain">
				<div class="cityTypeMain">
					<span class="cityTip">请选择您需要的城市</span>
					<span class="chose">
						<i id="areaList">您选择了：</i>
					</span>
					<ul class="AllCity">
						<li class="cityOne"></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="major">
			<span class="majorS"></span>
			<i class="majorI">专业</i>
			<i class="arrow"><img src="/ceca_two/img/xxjdown_arrow.png"></i>
			<div class="typeMain">
				<div class="majorTypeMain">
					<span class="majorTip">请选择您需要的专业</span>
					<span class="chose">
						<i id="majorList">您选择了：</i>
					</span>
					<ul class="Allmajor">
						<li class="majorOne"></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="periods">
			<span class="periodsS"></span>
			<i class="periodsI">期数</i>
			<i class="arrow"><img src="/ceca_two/img/xxjdown_arrow.png"></i>
			<div class="typeMain">
				<div class="periodsTypeMain">
					<span class="periodsTip">请选择您需要的期数</span>
					<span class="chose">
						<i id="gunidanceList">您选择了：</i>
					</span>
					<ul class="Allperiods">
						<li class="periodsOne"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
layui.use(['Router','filter','Zarea','Zutil'], function(Router,filter,Zarea,Zutil){
	var Router = layui.Router;
	var filter = layui.filter;
	var Zarea = layui.Zarea;
	var Zutil = layui.Zutil;
	var Url=Router.link.materialPrice.getGuidance;
	filter.geter({"url":Url,"fn":function(opts){
		var $areaList = $(".cityOne");
		$.each(Zarea.geter(),function(index,data){
			$areaList.append("<i data-code="+data.code+">"+data.name+"</i>    ");
		});
		$(".major").off("click");
		$(".cityOne i").click(function(o){
			var  city=null;
			var areaCode =$(this).attr("data-code");
			$("#areaList").append("<i  style='color:red'>"+$(this).text()+"</i>");
			$("#areaList").append("<i style='color:red'>></i>");
			$areaList.children("i").remove();
			$.each(Zarea.geter(),function(index,data){
				if(data.code.substring(0,2) == areaCode.substring(0,2)){
					city = data.child;
					$.each(city,function(index,data){
						$areaList.append("<i data-code="+data.code+">"+data.name+"</i>    ");
					});
					$(".cityOne i").click(function(o){
						var areaCode =$(this).attr("data-code");
						$("#areaList").append("<i  style='color:red'>"+$(this).text()+"</i>");
						$("#areaList").append("<i style='color:red'>></i>");
						$areaList.children("i").remove();
						$.each(city[0].child,function(index,data){
							$areaList.append("<i data-code="+data.code+">"+data.name+"</i>    ");
						});
						$(".cityOne i").click(function(o){
							var areaCode =$(this).attr("data-code");
							$("#areaList").append("<i  style='color:red'>"+$(this).text()+"</i>");
							$(".position").text($(this).text());
							$areaList.children("i").remove();
							console.dir(areaCode);
							filter.filter({"code":areaCode});
							$(".city .typeMain").hide();
							$(".major .typeMain").show();
							$(".major").on("click",function(){});
							return false;
						});
						return false;
					});
				}
			});
			return false;
		});
		$(".majorOne i").click(function(){
			console.dir($(this));
			$("#majorList").children("i").remove();
			$("#majorList").append("<i  style='color:red'>"+$(this).text()+"</i>");
			return false;
		});
		
		
		
	}});
	
});
</script>

